<template>
  <div class="content">
    <div class="basicInfo">
      <div style="flex: 1.5;">
        <span>
          赛事名称：
          <b>{{pageData.name}}</b>
        </span>
        <span>
          裁判长：
          <b>{{pageData.referee}}</b>
        </span>
      </div>
      
    </div>

    <div class="table">
      <p class="table-text">请选择组别：</p>
      <div class="tableItem">
        <el-table :data="tableData" stripe style="width: 100%;" border>
          <el-table-column prop="group_id" label="ID" width="80"></el-table-column>
          <el-table-column prop="project" label="项目-组别"></el-table-column>
          <el-table-column prop="number" label="人数限制"></el-table-column>
          <el-table-column prop="age" label="年龄限制"></el-table-column>
          <el-table-column prop="price" label="价格(元)" width="150"></el-table-column>
          <el-table-column prop="option" label="操作" width="180">
            <template slot-scope="scope">
              <p @click="goSignUp(scope.row.com_id,scope.row.group_id)" :style="{color:'#409eff',cursor: 'pointer'}">{{scope.row.option}}</p>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pageData:{}
    };
  },

  created() {
    this.getGroupList();
  },
  methods: {
    //获取赛事组别
    async getGroupList() {
      try {
        let result = await this.$axios.post(
          "/TeamSign/com_group",
          {
            com_id: this.$route.params.id
          },
          {
            headers: {
              token: window.sessionStorage.getItem("token")
            }
          }
        );
				this.$message({
					message:result.data.message,
					type:'success'
				})
       // console.log(result.data.data);
       let tableData=[];
        this.pageData=result.data.data;
        this.pageData.com_project.forEach((item) => {
          tableData.push({
          group_id:item.id,
          com_id:item.com_id,
          project: item.group,
          number: item.limit,
          age: item.age==''?'无年龄限制':item.age[1]+'至'+item.age[0],
          price: item.price,
          option: "立即报名"
          })
        });
        this.tableData=tableData

        //  tableData=result.data.data
      } catch (err) {
				this.$message({
					message:err,
					type:'error'
				})
        throw new Error(err);
      }
    },

    //立即报名
    goSignUp(com_id,group_id){
      this.$router.push({
        path:"/Index/signUp",
         query: {
            com_id,
            group_id
          }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.content {
  width: 90%;
  margin-left: 40px;
  padding-top: 30px;
}
.basicInfo {
  background: linear-gradient(
    90deg,
    rgba(66, 185, 131, 0.2),
    rgba(66, 185, 131, 0.4)
  );
  border-radius: 2px;
  line-height: 30px;
  height: 30px;
  padding: 15px;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  align-items: center;

  span {
    margin-right: 20px;
  }

  .btnGroup {
    /*height: 60px;*/
    /*float: right;*/
    margin-right: 20px;
  }

  .date {
    width: 25%;
    padding: 10px 15px;
  }
}
.table {
  margin-top: 30px;
  .table-text::before {
    content: "*";
    color: red;
    font-size: 20px;
    position: relative;
    top: 5px;
  }
  .tableItem {
    margin-top: 30px;
  }
}
</style>